<template>
	<view class="content">
		<!-- 可以用div 但是在小程序中会转换成 view  所以标签还不如直接用回小程序的 -->
		<div @click="aClick">ddddd</div>

		<!-- easycom 组件引入方式： 组件直接使用  无需引入和注册 -->
		<aaa></aaa>
		<!-- 组件为什么触发不了事件？ 因为在小程序中的是 bindtap 必须到子组件methods中定义(这个答案不对的)
			  正确来说  如果要 组件触发事件 应该回到组件的标签上绑定
		-->
		<bbb @click="aClick"></bbb>

		<!-- 无效 因为a标签会转回 navigation 标签 反正标签直接用回小程序的 -->
		<a href="/pages/index/index">这个是个a标签哦</a>
		<!-- 有效的 -->
    	<a url="/pages/index/index">这个是个a标签哦</a>

		<image class="logo" src="/static/logo.png"></image>
		<view>
			<text class="title">{{title}}</text>
		</view>
		<view v-for="item in list" :key="item.id" @click="onClick(item.name)">{{
        item.name
      }}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				list: [{ id: 1, name: "八戒" }],
			}
		},
		async onLoad() {
			// console.log("页面加载开始");
			// 1.支持promise 
			// 2.返回的值是一个数组 [错误信息，返回的数据]
			// const res = uni.request({
			// 	url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
			// });
			// console.log(res);
			// // 有没有出错
			// if (result[0]) {
			//   console.log("程序出错");
			// } else {
			//   // 正确 获取数据
			//   console.log("成功");
			//   console.log(result[1]);
			// }
			// 解构
			const [error, result] = await uni.request({
			url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
			});
			// 有没有出错
			if (error) {
			console.log("程序出错");
			} else {
			// 正确 获取数据
			console.log("成功");
			console.log(result);
			}
			  
		},
		methods: {
			aClick(){
				console.log("aaa");
			},
			onClick(item) {
				console.log(item);
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin: 200rpx auto 50rpx auto;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
